<template>
  <div class="container">
    <div class="header box">
      <h4 class="welcome">欢迎使用墙</h4>
      <div class="tools">
        <a class="tools-item" title="保持你的活跃度" @click="signIn">
          <div>
            <i class="iconfont icon-qiandao_"></i>
          </div>
          <span>签到</span>
        </a>

        <router-link class="tools-item" title="发布属于你的墙" to="/publish">
          <div>
            <i class="iconfont icon-fabu"></i>
          </div>
          <span>发布</span>
        </router-link>
      </div>
      <h4>
        <i class="el-icon-menu"></i>更多应用
      </h4>
      <div class="tools">
        <router-link class="tools-item" title="记录你的待办事项吧" to="/memo">
          <div>
            <i class="iconfont icon-bianjian"></i>
          </div>
          <span>便签</span>
        </router-link>
        <a class="tools-item" title="给你心中的那个他写一封情书吧" @click="toletter">
          <div>
            <i class="iconfont icon-xiexin"></i>
          </div>
          <span>写信</span>
        </a>
        <a class="tools-item" title="一起将墙打造的更完美" @click="checkjoin">
          <div>
            <i class="iconfont icon-jiarubanji"></i>
          </div>
          <span>建设群</span>
        </a>
      </div>
    </div>
    <div class="content box">
      <ul>
        <li @click="toinform">
          <i class="iconfont icon-tongzhi"></i> 我的通知
          <a title="通知数">{{count}}</a>
        </li>
        <li @click="checkHelp">
          <i class="iconfont icon-bangzhu1"></i> 我的帮助
        </li>
        <li @click="checkVersions">
          <i class="iconfont icon-banbenhao"></i> 查询版本
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, //提示数
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 获取我的消息提示数
      this.gethintcount();
    });
  },
  methods: {
    // 查看版本回调
    checkVersions() {
      return this.$message({
        type: "success",
        message: "当前为第一个大版本, 版本号1.0.1 (第二次测试版)",
      });
    },
    // 查看我的帮助回调
    checkHelp() {
      return this.$message({
        type: "success",
        message: "暂时只提供加群之后群里提问,群号：1014584988",
      });
    },
    // 点击加入我们的回调
    checkjoin() {
      return this.$message({
        type: "success",
        message:
          "如何你也是it行业,决的你对墙的完善还有属于你的想法，你可以加入这个群和我一起设计墙 群号：583836027",
      });
    },
    // 书信编程式路由跳转 uuId需要在登录后获取 暂时手动
    toletter() {
      this.$router.push({
        name: "letter",
        params: { uuId: this.userinfo.uuId, isCheck: true },
      });
    },
    // 签到的回调
    async signIn() {
      let result = await this.$API.signInByid();
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    // 获取我的消息提示数
    async gethintcount() {
      let result = await this.$API.gethintcount();
      if (result.code === 200) {
        this.count = result.data.count; //赋值
      }
    },
    // 跳转到我的通知页面
    toinform() {
      this.$router.push("/inform");
    },
  },
  computed: {
    // vuex中的个人信息
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .box {
    height: auto;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .header {
    .welcome {
      padding: 10px 0;
    }
    h4 {
      text-align: center;
      margin: 0 5px;
      font-size: 16px;
      color: #008c8c;
    }
    .tools {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 10px 0;
      .tools-item {
        cursor: pointer;
        i {
          font-size: 18px;
          color: #008c8c;
        }
        span {
          font-size: 12px;
          color: #121212;
        }
      }
      .tools-item:hover span {
        color: #008c8c;
      }
    }
  }
  .content {
    ul {
      padding: 10px 0;
      width: 100%;
      li {
        cursor: pointer;
        padding: 0 5px;
        height: 30px;
        line-height: 30px;
        color: #008c8c;
        a {
          margin-left: 60px;
          display: inline-block;
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #f6f6f6;
        }
      }
      li:hover {
        background: #f6f6f6;
        a {
          background: #fff;
        }
      }
    }
  }
}
</style>